<template>
  <div class="navTab">
    <div class="leftIcon" @click='_handleBack'></div>
    <slot name="title"></slot>
    <div class='icon'
         @click="_handleRight"
         :class="rightText?  'rightText' : rightIcon">
      {{rightText}}
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {}
    },
    props: {
      rightIcon: {
        type: String,
        default: 'rightIcon'
      },
      rightText: {
        type: String,
        default: ''
      },
      _handleRight: {
        type: Function,
        default() {
          return this._renderNull
        }
      }
    },

    methods: {
      _handleBack() {
        this.$router.go(-1)
      },
      _renderNull() {

      }
    }

  }
</script>
<style scoped lang="scss">
  .navTab {
    height: 88px;
    background-color: rgba(245, 246, 247, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    div {
      height: auto;
      width: fit-content;
    }

    .leftIcon {
      width: 48px;
      height: 48px;
      background: url("../../static/images/left.png") no-repeat center;
      -webkit-background-size: 100%;
      background-size: 100%;
    }

    .titleText {
      font-size: 30px;
      font-weight: 600;
      height: 100%;
      display: flex;
      align-items: center;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: url("") no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
        margin-right: 22px;
      }
    }

    .textColor {
      color: #1FCCC0;
    }

    .icon {
      width: 48px;
      height: 48px;
      background: url("") no-repeat center;
      -webkit-background-size: 100%;
      background-size: 100%;
    }

    .rightText {
      width: auto;
      height: 88px;
      font-size: 32px;
      color: #1FCCC0;
      line-height: 88px;
      font-weight: 600;
    }

    .rightIcon {
      background-image: url("../../assets/images/right.png");
    }

    .rightF {
      width: 70px;
      height: 68px;
      background-image: url("../../assets/images/25.png");
    }

    .shareIcon {
      background-image: url("../../assets/images/11.png");
    }
  }
</style>
